<template>
    <div class="newaddress">
        <van-nav-bar title="新增地址" left-arrow @click-left="onClickLeft" />
        <div>
            <van-cell-group inset>
                <van-field v-model="user" label="联系人" placeholder="请输入联系人" />
                <van-field v-model="phone" type="tel" label="联系电话" placeholder="请输入联系电话" />
                <van-field v-model="sex" type="tel" label="性别" placeholder="1.男2.女" />
                <van-field v-model="home" type="tel" label="标签" placeholder="2.家3.学校4.公司" />
            </van-cell-group>
            <div class="show" @click="showPopup">收货地址:  {{ address }}</div>
            <div class="show">地址详情:  {{ detailAddress }}</div>
        </div>
        <div class="show-btn" @click="setAddress">确定</div>
        <van-popup
        v-model:show="show"
        closeable
        position="bottom"
        :style="{ height: '70%' }"
        >
            <!-- 搜索详细地址 -->
            <div class="eject">
                <div>
                    <van-search
                    v-model="value"
                    show-action
                    label="地址"
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    >
                    <template #action>
                        <div @click="onClickButton">搜索</div>
                    </template>
                    </van-search>

                </div>
                <ul class="eject-list">
                    <li v-for="(item,index) in ejectList" :key="index" @click="getDetail(item.geohash)">
                        <div>{{ item.name }}</div>
                        <div>{{ item.address }}</div>
                    </li>
                </ul>
            </div>
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'

import axios from 'axios';

import { listProps } from 'vant';

export default defineComponent({
    name:'Newaddress',
    setup () {

        // 用户id
        let userId:number = 76942;

        // 输入框
        let user = ref('');
        let phone = ref();
        let sex = ref();
        let home = ref();
        let address = ref('点击搜索地址');
        let detailAddress = ref('');
        let geohash:string = '';

        // 弹出层
        const show = ref(false);

        let ejectList = ref<Array<any>>([]);

        // 设置地址
        let getDetail:(val:any) => void = (val:any):void => {
            console.log('val==>',val);
            for(let i = 0 ; i < ejectList.value.length ; i++){
                if(val === ejectList.value[i].geohash){
                    // console.log('相同');
                    address.value = ejectList.value[i].name;
                    detailAddress.value = ejectList.value[i].address;
                    geohash = ejectList.value[i].geohash;
                }
            }
        }

        // 发送地址数据
        let setAddress:() => void = ():void => {
            axios({
                method:'post',
                url:`https://elm.cangdu.org/v1/users/${userId}/addresses`,
                data:{
                    user_id:userId,
                    address: address.value,
                    address_detail: detailAddress.value,
                    geohash: geohash,
                    name: user.value,
                    phone: phone.value,
                    tag: '标签',
                    sex: sex.value,
                    phone_bk: phone.value,
                    tag_type:home.value,
                }
            }).then(res => {
                console.log('res ==>',res);
            }).catch(err => {
                console.log('err ==>',err);
                
            })
        }

        // 搜索地址
        let getAddress:(val:string) => void = (val:string):void =>{
            axios({
                method:'get',
                url:'https://elm.cangdu.org/v1/pois',
                params:{
                    city:4,
                    keyword:val
                }
            }).then(res => {
                console.log('res==>',res);
                ejectList.value = res.data;
                
            }).catch(err => {
                console.log('err==>',err);
                
            })
        }
        // 弹出层
        const showPopup = () => {
            show.value = true;
        };


        // 搜索
        const value = ref('');
        let onSearch:(val:string) => void = (val:string):void => {
            console.log('val==>',val);
            getAddress(val);
            
        };
        let onClickButton:() => void = ():void => {
            console.log('value.value==>',value.value);
            getAddress(value.value);
        };

        // 返回上一页
        const onClickLeft = () => history.back();
        

        return {
            show,
            value,
            ejectList,
            address,
            detailAddress,

            user,
            phone,
            sex,
            home,

            onSearch,
            onClickButton,
            showPopup,
            onClickLeft,
            getDetail,
            setAddress
        }
    }
})
</script>

<style  lang="scss" scoped>
.show-btn{
    width: 250px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #4CD964;
    margin: 10px auto;
}
.show{
    width: 100%;
    font-size: 14px;
    color: #323233;
    padding: 5px 30px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}
.eject-list{
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    li{
        width: 100%;
        border-bottom: 2px solid #ccc;
        margin-bottom: 5px;
    }
}

.eject{
    margin-top: 30px;
}


::v-deep .van-nav-bar__content {
    background-color: #3190e8;
}

::v-deep .van-nav-bar__title {
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
}

::v-deep .van-nav-bar .van-icon {
    color: #ffffff;
    font-size: 22px;
}

::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0;
}
</style>